/**
 * Created by Administrator on 2017/9/26.
 */
import React from 'react';
import css from './index.less';
import { Slider } from 'antd';
import PropTypes from 'prop-types';

class Range extends React.Component {

  static propTypes = {
    label: PropTypes.string,
    max: PropTypes.number,
    min: PropTypes.number,
    step: PropTypes.number,
    inputValue: PropTypes.number,

  };

  static defaultProps = {
    label: '二级标题',
    max: 100,
    min: 0,
    step: 1,
    inputValue: 0,
  };

  constructor(props) {
    super(props);
    this.state = {

    };

  }

  onChange = (e) => {
    const { onRangeChange = () => {}, label } = this.props;
    if (e.target) {
      onRangeChange(label, parseFloat(e.target.value));
    } else if (e) {
      onRangeChange(label, parseFloat(e));
    }

  };

  render() {

    let { label, min, max, step, inputValue} = this.props;

    return (
      <div className={css.row}>
        <div className={css.label}>
          <span>{label}</span>
        </div>
        <div className={css.sliderBox}>
          <Slider
            min={min} max={max}
            onChange={this.onChange}
            value={inputValue}
            step={step} />
        </div>
        <input className={css.show} onChange={this.onChange} value={inputValue} type="number"/>

      </div>
    );
  }
}
export default Range;
